<template>
	<view :class="config.style">
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		<view v-if="status == 1">
			<!-- #ifdef H5-->
			<Top :config="config"></Top>
			<!-- #endif -->
			<view v-if="data.status == 1">
				<view class="main-section top tabbar-bottom">
					<view class="cover" v-if="data.cover">
						<image mode="widthFix" :src="data.cover_800" class="image"></image>
					</view>
					<view class="cover" v-else>
						<image mode="widthFix" :src="data.material_icon_400_300" class="image"></image>
					</view>
				
					<view class="base-info">
						<view class="title">
							{{data.title}}
						</view>
						<view class="description">
							{{data.description}}
						</view>
						<view class="price" v-if="data.price==0">
							免费
						</view>
						<view class="price" :class="!showSale?'hidden':''" v-else>
							￥ {{data.price}}
						</view>
						<view class="data-info">
							<view class="marking-price" :class="!showSale?'hidden':''" v-if="config.show_marking_price==1&&data.marking_price!=0">
								￥ {{data.marking_price}}
							</view>
							<view class="exp-info">
								<view class="item view">
									<uni-icons type="eye" size="10" color="#999"></uni-icons> 
									<text class="num">{{data.handling_view}}</text>
								</view>
								<view class="item sales">
									<uni-icons type="cart-filled" size="10" color="#999"></uni-icons> 
									<text class="num">{{data.handling_sales}}</text>
								</view>
								<view class="item favorites">
									<uni-icons type="star" size="10" color="#999"></uni-icons> 
									<text class="num">{{data.handling_favorites}}</text>
								</view>
							</view>
						</view>
						<view class="tabs">
							<view v-if="data.only_member == 1" class="item only-member">会员专享</view>
							<view v-if="data.score > 0" class="item score">
								<text>返还积分：</text>
								<text>{{data.score}}</text>
							</view>
						</view>
					</view>
					
					<!--支持的会员卡-->
					<template v-if="!loading && data.support_member_cards!==undefined && data.support_member_cards.length > 0 && showSale">
						<SupportMemberCards :cardsData="data.support_member_cards" />
					</template>
					<!--评价功能-->
					<template v-if="!loading">
						<Evaluate type="Material" :typeId="Number(data.id)" />
					</template>
					<!--教师显示块-->
					<template v-if="data.teacher && data.teacher_id > 0">
						<Teacher :teacherId="Number(data.teacher_id)" :teacherData="data.teacher" />
					</template>
					<!--课程详情块-->
					<view class="detail">
						<view class="tab">
							<view class="tab-item tab-content" :class="[detailShow == 'content'?'active':'',data.lessons_list !== undefined && data.lessons_list.length > 0?'':'only']" @click="toggleDetailShow('content')">
								详情
							</view>
						</view>
						<view class="content" :class="detailShow == 'content'?'':'hidden'">
							<!--购买后自定义描述-->
							<view class="custom-desc" v-if="data.purchase == 1 || (data.can_be_used_card!=undefined && data.can_be_used_card.member_card_info.discount == 0)">
								<!-- #ifdef MP-->
								<rich-text :nodes="util.formatRichText(data.custom_desc)"></rich-text>
								<!-- #endif -->
								<!-- #ifdef H5-->
								<view v-html="util.formatRichText(data.custom_desc)"></view>
								<!-- #endif -->
							</view>
							<!--完整描述-->
							<view class="all-content">
								<!-- #ifdef MP-->
								<rich-text :nodes="util.formatRichText(data.content)"></rich-text>
								<!-- #endif -->
								<!-- #ifdef H5-->
								<view v-html="util.formatRichText(data.content)"></view>
								<!-- #endif -->
							</view>
							
							<!--问答-->
							<template v-if="!loading">
								<Questions type="Material" :typeId="Number(data.id)" />
							</template>
							<CopyRight :data="config.copyright" />
						</view>
					</view>
				</view>
				<template v-if="!loading && config">
					<SaleBar type="Material" m="muu_classroom_plugin_material" @getData="getData" :data="data" :config="config" />
				</template>
			</view>
			<view class="tip" v-else>
				内容未上架，请稍后访问
			</view>
		</view>
		<view class="tip" v-else>
			系统不支持该功能
		</view>	
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import CopyRight from '@/common/components/copyright.vue' //自定义版权
	import SaleBar from '../common/saleBar.vue'
	import SupportMemberCards from '../common/supportMemberCards.vue'
	import Teacher from '../common/teacher.vue'
	import Evaluate from '../common/evaluate.vue'
	import Questions from '../common/questions.vue'
	
	export default {
		
		components: {
			SaleBar,
			SupportMemberCards,
			Teacher,
			Evaluate,
			Questions,
			CopyRight,
		},
		data() {
			return {
				loading: true, //加载中
				urlParams: {},
				userInfo : {}, //用户数据
				pluginList: [],
				pluginConfig: {},   // 插件配置
				status: 0, // 是否启用了资料插件
				data: {},
				detailShow: 'content', //内容区默认显示课程详情 string content:课程详情 list:系列课目录
				showSale: this.util.setShowSale(),
			}
		},
		async onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		    await this.$onLaunched;
			this.urlParams = option
			// #ifdef MP-WEIXIN
			//通过小程序码进入的获取参数
			if(option.scene){
				// options 中的 scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
				let scene = decodeURIComponent(option.scene); 
				let obj = {};
				for (var i = 0; i < scene.split('*').length;i++){
				  var arr = scene.split('*')[i].split('/');
				  obj[arr[0]] = arr[1];
				}
				this.urlParams.id = obj.id
				this.urlParams.promoter_uid = obj.u
				//console.log(this.urlParams,'scene')
			}
			// #endif
			if(this.urlParams.promoter_uid){
				uni.setStorageSync('promoter_uid',this.urlParams.promoter_uid)
			}
			await this.getPlugin()
			await this.getPluginConfig()
			await this.setStatus()
			await Promise.all([this.getData()]).then(res => {
				// H5端分享设置
				//#ifdef H5
				let url = window.location.href
				let shareData = {
					title : this.data.title,
					desc : this.data.description,
					img: this.data.cover_200
				}
				this.wechat.share(shareData,url);
				//#endif
				//加载完成
				this.loading = false
			})
		},
		created() {
			//获取已登录用户数据
			this.getUserInfo()
		},
		computed: {
			...mapState(['config'])
		},
		methods: {
			/**
			 * 获取已安装插件列表
			 */
			getPlugin(){
				let that = this
				//获取分类数据
				return new Promise((resolve, reject) => {
					let data = {}
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/plugin'
						//#endif
						//#ifdef H5
						url = 'entry/site/plugin'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								let plugin = res.data.data
								plugin.forEach(function(v,l){
									that.pluginList.push(v.name)
								})
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 获取插件配置
			 */
			getPluginConfig(){
				let that = this
				
				return new Promise((resolve, reject) => {
					let data = {}
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/material'
						data.action = 'config'
						data.m = 'muu_classroom'
						//#endif
						//#ifdef H5
						url = 'entry/site/config'
						data.m = 'muu_classroom_plugin_material'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.pluginConfig = res.data.data
							}
							resolve(res.data)
						},
						fail: function(){
							reject()
						}
					})
				})
			},
			
			/**
			 * 设置插件状态
			 */
			setStatus() {
				let that = this
				this.pluginList.forEach(function(v,l){
					if(v == 'muu_classroom_plugin_material' && that.pluginConfig.status == 1){
						that.status = 1
					}
				})
				if(this.status == 0){
					uni.setNavigationBarTitle({
					　　title: '系统提示'
					})
				}
			},
			
			/**
			 * 获取课程详情数据
			 */
			getData: function(){
				let that = this
				return new Promise((resolve, reject) => {
					let params = this.urlParams
					let data = {}
						data.action = 'detail'
						data.id = params.id
					//获取数据
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/material'
						data.m = 'muu_classroom'
						//#endif
						//#ifdef H5
						url = 'entry/site/material'
						data.m = 'muu_classroom_plugin_material'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.data = res.data.data
								if(that.status == 1){
									uni.setNavigationBarTitle({
									　　title:res.data.data.title
									})
								}
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 显示隐藏详情或目录
			 * @param {Object} value
			 */
			toggleDetailShow: function(value){
				if(value == 'content'){
					this.detailShow = 'content'
				}else{
					this.detailShow = 'list'
					this.getKnowledgeList(1)
				}
			},
			
			/**
			 * 获取已登录用户数据
			 */
			getUserInfo: function(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {}
				this.userInfo = userInfo
			},
		},
		onReachBottom() {
			console.log('页面滚动到底部')
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {
			// 分享(分销)用户ID
			let userInfo = this.userInfo.memberInfo || {}
			let url = '/muu_classroom/pages/material/detail?' + 'id=' + this.data.id
			if(userInfo.hasOwnProperty("uid") && userInfo.uid !== undefined){
				url = url + '&promoter_uid=' + userInfo.uid
			}
			let share = {
				title : this.data.title,
				path : url,
				desc : this.data.description,
				success : function(){
					
				},
			}
			
			return share
		},
		/**
		 * 监听用户点击右上角转发到朋友圈
		 */
		onShareTimeline() {
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.cover {
		position: relative;
		width: 100%;
		image {
			width: 100%;
			display: block;
		}
	}
	.base-info {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #000;
		}
		.description {
			font-size: 28rpx;
			color: #999;
		}
		.price {
			font-size: 36rpx;
			font-weight: 500;
			color: red;
			margin: 20rpx 0 10rpx 0;
		}
		.data-info {
			display: flex;
			.marking-price {
				font-size: 28rpx;
				color: #999;
				text-decoration: line-through;
				width: 30%;
			}
			.exp-info {
				flex: 1;
				width: 70%;
				text-align: right;
				.item {
					display: inline-block;
					color: #999;
					margin: 0 10rpx;
					font-size: 24rpx;
					.num {
						margin-left: 10rpx;
					}
				}
			}
		}
	}
	
	.time-and-address {
		background-color: #fff;
		margin-bottom: 16rpx;
		font-size: 24rpx;
		color: #999;
		padding: 10rpx 0;
		.time {
			display: flex;
			padding: 10rpx 20rpx;
			
			.icon {
				width: 40rpx;
			}
			.info {
				flex: 1
			}
		}
		.address {
			display: flex;
			padding: 10rpx 20rpx;
			.icon {
				width: 40rpx;
			}
			.info {
				flex: 1
			}
			.active {
				width: 40rpx;
			}
		}
	}
	
	.detail {
		.tab {
			display: flex;
			padding: 10rpx 0;
			padding: 0 20rpx 0 20rpx;
			background-color: #fff;
			.tab-item {
				flex: 1;
				text-align: center;
				line-height: 72rpx;
				padding-bottom: 8rpx;
			}
			.tab-item.only {
				flex: none;
				text-align: left;
			}
			.tab-content {
				
			}
			.tab-list {
				
			}
			.active {
				position: relative;
				&:before {
					position: absolute;
					right: 30%;
					left: 30%;
					bottom: 0;
					height: 8rpx;
					content: '';
					-webkit-transform: scaleY(.5);
					transform: scaleY(.5);
					background-color: #03b8cf;
				}
			}
		}
		//详情
		.content {
			
			.try-content {
				margin-bottom: 16rpx;
				padding: 20rpx;
				background-color: #fff;
				user-select: text;
			}
			.custom-desc {
				margin-bottom: 16rpx;
				padding: 20rpx;
				background-color: #fff;
				user-select: text;
			}
			.all-content {
				margin-bottom: 16rpx;
				padding: 20rpx;
				background-color: #fff;
				user-select: text;
			}
		}
		
		.list {
			background-color: #fff;
			.lessons {
				background-color: #fff;
				.item {
					padding: 20rpx;
					margin-bottom: 20rpx;
					.start_time {
						font-size: 24rpx;
						color: #999;
					}
					.title {
						font-size: 28rpx;
						color: #333;
						font-weight: 600;
					}
				}
			}
		}
	}

</style>
